<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      作用域插槽：
        有时我们需要在插槽内容中使用组件内的数据，这时就需要用上作用域插槽的技术。

      如何使用:
        1. 在组件的 slot 出口元素上，传递属性出去
        2. 插槽内容上通过 v-slot:xxx="scoped" ，这里的 scoped 就是组件内 slot 元素上除了 name 属性之外的属性集合。
     -->

    <div id="app">
      <hello>
        <!-- <template #default="{a}">
          <p>第一个 - {{ a }}</p>
        </template> -->

        <!-- 2.6.0 之前的语法 -->

        <template slot-scope="{a}">
          <p>第一个 - {{ a }}</p>
        </template>
      </hello>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      Vue.component("hello", {
        data() {
          return {
            count: 100,
          };
        },
        template: `
          <div>
            <h2>Hello</h2>  
            <slot name="default" :a="count" b="2" c="3"></slot>
          </div>
        `,
      });

      const vm = new Vue({
        el: "#app",
        data: {
          count: 200,
        },
      });
    </script>
  </body>
</html>
